<template>
 <el-card class="tb-warp">
  <crud-table-v2 url="/testStudentList">
    <crud-table-header :inline="false">
      <crud-table-search>
        <template #search>
          <el-form-item label="姓名" prop="name">
            <el-input clearable placeholder="姓名" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input clearable placeholder="年龄" />
          </el-form-item>
        </template>
      </crud-table-search>
      <crud-table-action>
        <crud-table-btn-add url="/testStudentList/add" />
      </crud-table-action>
    </crud-table-header>

    <crud-table-pagination>
      <crud-table-data>
        <el-table-column label="name" prop="name" algin="center" />
        <el-table-column label="age" prop="age" algin="center" />
        <crud-table-handler width="150px">
          <template #hander>
            <crud-table-btn-preview />
            <crud-table-btn-edit style="color: #67C23A;" url="/testStudentList/edit" />
            <crud-table-btn-del style="color: #F56C6C;" url="/testStudentList/delete" />
          </template>
        </crud-table-handler>
      </crud-table-data>
    </crud-table-pagination>

    <crud-table-dialog :formProps="{ labelPosition: 'right' }" width="50%">
      <template #formDialog>
        <el-form-item label="姓名" prop="name">
          <el-input clearable placeholder="姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input clearable placeholder="年龄" />
        </el-form-item>
      </template>
    </crud-table-dialog>
  </crud-table-v2>
 </el-card>
</template>

<style lang="scss">
.tb-warp {
  height: 100%;
  .el-card__body {
    height: 100%;
  }
}
</style>